import React from 'react'

class TwoPageTabs extends React.Component {

    constructor(props) {
        super(props)
    }
    render() {
        const tabsState = this.props.tabsState
        const tabs = <div
            className='flex-space-between-align-center'
            style={{
                height: '44px',
                width: '100%',
                marginTop: '1px',
                marginBottom: '1px',
            }}
        >
            {tabsState.map((tab, index) => {
                return <div
                    key={index}
                    style={{
                        background: '#fff',
                        width: '100%',
                        height: '100%',
                        marginRight: '1px',
                        textAlign: 'center',
                    }}
                    onClick={(e) => this.props.onTabClick(index)}
                >
                    <span
                        style={{
                            color: tab.active ? '#FFA500' : 'rgba(51,51,51,0.8)',
                            lineHeight: '44px',
                        }}
                    >{tab.title}</span>
                </div>
            })}
        </div>
        return tabs
    }

}

export default TwoPageTabs
